<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--公共头部信息-->
<th:block th:fragment="head">
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="/static/img/favicon.svg" >
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--css-->
    <link rel="stylesheet" href="/static/css/reset.css"><!--重置css-->
    <link rel="stylesheet" href="/static/bootstrap/bootstrap.min.css"><!--bootstrap.css-->
    <link rel="stylesheet" href="/static/bootstrap/font/bootstrap-icons.css"><!--bootstrap图标库css-->
    <link rel="stylesheet" href="/static/css/head.css"><!--顶部导航css-->
    <link rel="stylesheet" href="/static/js/cropper/cropper.min.css"><!--图片裁剪css-->
    <link rel="stylesheet" href="/static/js/message/message.css"><!--弹窗css-->
    <link rel="stylesheet" href="/static/js/element-ui/css/index.css">
    <link rel="stylesheet" href="/static/css/el.css">

    <!--js-->
    <script src="/static/js/jquery-3.5.1.min.js"></script><!--jquery-->
    <script src="/static/js/jquery-hoverIntent/jquery-hoverIntent.min.js"></script><!--jq延时-->
    <script src="/static/bootstrap/bootstrap.min.js"></script><!--bootstrap.js-->
    <script src="/static/js/cropper/cropper.min.js"></script><!--图片处理js-->
    <script src="/static/js/message/message.js"></script><!--弹窗js-->
    <script src="/static/js/vue/vue.js"></script><!--vue.js-->
    <script src="/static/js/element-ui/js/index.js"></script>
    <script src="/static/js/axios/axios.min.js"></script><!--axios.js-->
    <script src="/static/js/head.js"></script><!--顶部导航js-->
    <script src="/static/js/el.js"></script>

</th:block>

<!--头部导航栏-->
<th:block th:fragment="sidebar(div)">
    <div id="sidebar">
        <!--外部容器-->
        <el-container>
            <!--侧边栏-->
            <el-aside width="auto">
                <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span slot="title">导航一</span>
                        </template>
                        <el-menu-item-group>
                            <span slot="title">分组一</span>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                            <span slot="title">选项4</span>
                            <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>

                    <!--切换按钮-->
                    <div @click="toggleCollapse">
                        <span class="arrowDiv" id="arrowDiv" v-show="showArrowDiv">
                            <i :class="{'el-icon-arrow-right right' : isActive, 'el-icon-arrow-left left': !isActive}"></i>
                            <i :class="{'el-icon-arrow-right right' : isActive, 'el-icon-arrow-left left': !isActive}"></i>
                        </span>
                    </div>

                </el-menu>
            </el-aside>

            <!--右侧容器-->
            <el-container>
                <!--导航栏-->
                <el-header>
                    <div id="navv">
                        <div th:replace="~{commons/commons2::topNav}"></div>
                    </div>
                </el-header>

                <!--主要内容-->
                <el-main>
                    <!--插槽-->
                    <slot></slot>
                    <th:block th:replace="${div}" />

                </el-main>
            </el-container>
        </el-container>
    </div>
</th:block>

<!--头部导航栏-->
<th:block th:fragment="topNav">

    <div id="nav">
        <nav class="navbar navbar-expand-md navbar-light shadow-sm">
            <div style="margin-right: 25px;cursor: pointer">
                <img src="/static/img/favicon.svg" alt="logo">
            </div>
            <a class="navbar-brand welcome" href="#" th:text="'欢迎：' + ${session.LoginInfo.username}"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">

                <!--左侧区域-->
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/user/userInfo">用户管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/student/info">学生管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/file/fileManage">文件管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/file/upload">上传文件</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/file/fileList">文件列表</a>
                    </li>
                    <!--下拉菜单-->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                            文件
                        </a>
                        <div class="dropdown-menu">
                            <!--下拉菜单-->
                        </div>
                    </li>
                </ul>

                <!--右侧区域-->
                <ul class="nav navbar-nav ml-auto">
                    <li class="nav-item avatar-li">
                        <!--头像-->
                        <div class="avatar-container">
                            <a data-toggle="modal" data-target="#avatar-modal" id="avatar">
                                <img th:src="${session.LoginInfo.avatar} + '?tem=' + ${T(java.lang.Math).random()}" class="img-fluid rounded-circle img-thumbnail" alt="头像">
                            </a>

                            <!--头像二级菜单-->
                            <div class="menu avatar-menu">
                                <div class="avatar-menu-img" data-toggle="modal" data-target="#avatar-modal">
                                    <img th:src="${session.LoginInfo.avatar} + '?tem=' + ${T(java.lang.Math).random()}" class="img-fluid rounded-circle img-thumbnail" alt="头像">
                                </div>
                                <div class="avatar-menu-content">
                                    <p th:text="${session.LoginInfo.username}"></p>
                                    <span>年度会员</span>
                                    <div class="level">
                                        <span>等级5</span>
                                        <span style="color: grey;font-size: 10px;">9999/N</span>
                                    </div>
                                    <!--进度条-->
                                    <div class="level-bar">
                                        <div class="level-progress"></div>
                                    </div>
                                    <div class="links">
                                        <a target="_blank" class="link-item text-decoration-none text-muted" data-toggle="modal" data-target="#loginInfoModal">
                                            <div data-v-59fd5a91="" class="link-title">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-key" viewBox="0 0 16 16">
                                                    <path d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
                                                    <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                                                </svg>
                                                修改密码
                                            </div>
                                        </a>
                                        <a href="#" target="_blank" class="link-item text-decoration-none text-muted">
                                            <div data-v-59fd5a91="" class="link-title">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-bookmark" viewBox="0 0 16 16">
                                                    <path fill-rule="evenodd" d="M6 8V1h1v6.117L8.743 6.07a.5.5 0 0 1 .514 0L11 7.117V1h1v7a.5.5 0 0 1-.757.429L9 7.083 6.757 8.43A.5.5 0 0 1 6 8z"/>
                                                    <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
                                                    <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
                                                </svg>
                                                我的课程
                                            </div>
                                        </a>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="nav-item">
                        <!--导航栏右-退出区-->
                        <div class="cancel">

                            <a class="nav-link" id="cancel" href="/logout">退出</a>

                            <!--退出二级菜单-->
                            <div class="menu cancel-menu">
                                <div>好好学习，天天向上</div>
                            </div>

                        </div>
                    </li>
                </ul>
            </div>
        </nav>


        <!-- 头像模态框 -->
        <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
            <div class="modal-dialog modal-lg" style="max-width: 870px;">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header" >
                        <h4 class="modal-title">上传头像</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <div class="avatar-body">
                            <div class="avatar-upload">
                                <input type="file" id="file" name="file" style="display: none">
                                <input class="btn btn-outline-primary" id="uploadBtn" type="button" value="选择头像" accept=".jpg,.jpeg,.png,.bmp">
                            </div>
                            <div class="row">
                                <div class="col-md-9">
                                    <div class="avatar-wrapper">
                                        <!--生成img标签-->
                                    </div>
                                </div>
                                <div class="col-md-3 preview-wrapper">
                                    <div class="preview lg"></div>
                                    <div class="preview md"></div>
                                    <div class="preview sm"></div>
                                </div>
                            </div>
                            <div class="offset-md-9 col-md-3">
                                <button type="button" id="avatarSummit" class="btn btn-outline-success">保存修改</button>
                            </div>
                        </div>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <!--<button type="button" class="btn btn-danger" data-dismiss="modal" id="confirmAvatar">确定</button>-->
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    </div>

                </div>
            </div>
        </div>
        <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>

        <!--修改密码模态框-->
        <div class="modal fade" id="loginInfoModal" >
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">修改信息</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <!--用户信息表单-->
                        <form id="loginInfoForm">
                            <div class="form-group">
                                <label for="originalPsd">用户原密码</label>
                                <input type="password" class="form-control" v-model="originalPsd" id="originalPsd" required>
                                <small class="form-text text-muted">提示信息</small>
                            </div>
                            <div class="form-group">
                                <label for="newPsd">新密码</label>
                                <input type="password" class="form-control" v-model="newPsd" id="newPsd" required>
                            </div>
                            <div class="form-group">
                                <label for="confirmNewPsd">确认新密码</label>
                                <input type="password" class="form-control" v-model="confirmNewPsd" id="confirmNewPsd" required>
                            </div>
                            <!--
                            <div class="form-group">
                            <label for="confirmNewPsd">电子邮箱</label>
                            <input type="email" class="form-control" name="email" id="email">
                            <small class="form-text text-muted">如果填写邮箱则会发送一封带有密码更改</small>
                        </div>-->
                        </form>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" @click="loginInfoUpdate">确定</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</th:block>


</html>